<template>
  <section>
    <cube-checkbox v-model="serviceChecked" @input="onInput">
      同意
      <router-link to="/">协议</router-link>和
      <router-link to="/">免责条款</router-link>
    </cube-checkbox>
    <div class="btn-group">
      <button class="btn btn-block btn-primary" @click="handle2BtnClick" >{{btnText}}</button>
    </div>
    <div class="link text-right">
      <router-link :to="btnText == '登陆' ? '/reg' : '/login'">{{btnText == '登陆' ? '注册' : '去登陆'}}</router-link>
    </div>
  </section>
</template>

<script>
export default {
  name: 'FormBtn',
  props: {
    btnText: {
      type: String,
      default: '登陆'
    }
  },
  data () {
    return {
      serviceChecked: false
    }
  },
  methods: {
    onInput () {
      this.$emit('onInput', this.serviceChecked);
    },
    handle2BtnClick () {
      this.$emit('onSubmit');
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~assets/css/style.styl';
/ >>> .cube-checkbox-input{
  width auto 
  height auto
}

.btn-group,
.link {
  padding 10px 16px
}
.link a {
  color #212121
}
</style>
